<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>九盛中彩</title>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/rem.js"></script>

		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/fonts.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
	</head>

	<body>
		
		<div id="app" v-cloak>
		<header class="mui-bar mui-bar-nav header">
			<a class="mui-icon mui-pull-left">
				<img src="images/saoyisao.png" />
			</a>
			<a class="mui-icon mui-pull-right">
				<img src="images/元宝.png" />
			</a>
			<h1 class="mui-title">九盛中彩</h1>
		</header>
		
		<runoob></runoob>
		
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--banner-->
				<div class="mui-slider banner">
					<div class="mui-slider-group mui-slider-loop">
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate"></div>
						<div class="mui-slider-item">
							<a href="#"><img src="images/banner1.jpg" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="images/banner1.jpg" /></a>
						</div>

						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="images/banner1.jpg" /></a>
						</div>
					</div>

					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>

					</div>
				</div>
				<!--banner-->
				
				<div class="news-more">
					<div class="news-cont">
						<span><img src="images/laba.png" /></span>
						<p>看比赛，玩竞猜，好礼等你来！</p>
					</div>
					<a href="#">更多</a>
				</div>
				<div class="index-center-nav">
					<ul class="mui-table-view mui-grid-view mui-grid-12">
						<li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
							<img src="images/index-nav1.png" />
							<div class="mui-media-body">开奖</div></a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
							<img src="images/index-nav2.png" />
							<div class="mui-media-body">比分</div></a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
							<img src="images/index-nav3.png" />
							<div class="mui-media-body">众赢</div></a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3"><a href="#">
							<img src="images/index-nav4.png" />
							<div class="mui-media-body">擂台</div></a>
						</li>
					</ul>
				</div>

				<div class="index-product">
					<ul>
						<li></li>
					</ul>
				</div>

			</div>
		</div>
	</div>
	
		<script>
			$(document).ready(function(){
				new Vue({
					el: '#app'
				})
				
				$('.nav-list a').eq(0).addClass('mui-active');
				$('.nav-list a').on('click',function(){
					var dataId = $(this).attr('id');
					location.href=dataId+'.html';
				})
			})
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			
			
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						//						height: 50, //可选,默认50.触发下拉刷新拖动距离,
						//						auto: true, //可选,默认false.首次加载自动下拉刷新一次
						//						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						//						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						//						contentrefresh: "正在努力刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: setDown //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
					//					,
					//					up: {
					//						contentrefresh: '正在加载...',
					//						callback: setUp
					//					}
				},
				gestureConfig: {
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: true, //默认为false
					swipe: true, //默认为true
					drag: true, //默认为true
					hold: false, //默认为false，不监听
					release: false //默认为false，不监听
				},
				swipeBack: true //启用右滑关闭功能
			});

			//			mui(".mui-scroll-wrapper").scroll({
			//				bounce: false, //滚动条是否有弹力默认是true
			//				indicators: false, //是否显示滚动条,默认是true
			//				deceleration: mui.os.ios ? 0.0003 : 0.0009 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			//			});

			function setDown() {
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
			}

			function setUp() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			}
//			mui('.index-qiandao').addEventListener("swipeleft",function(){
//			     console.log("你正在向左滑动");
//			});

		</script>
		
	</body>

</html>